import React, { Component } from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { inject, observer } from 'mobx-react';

@inject('store')
@observer
class DictDialog extends Component {
  formRef = React.createRef();
  okHandler = async () => {
    try {
      let values = await this.formRef.current.validateFields();
      this.props.store.saveDict(values);
    } catch (e) {
      console.log(e);
    }
  };

  cancelHandler = () => {
    this.props.store.closeDictDialog();
  };

  render() {
    const { store } = this.props;
    const { editData, visible, loading } = store.dictDialogData;
    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    let title = editData.id ? '编辑数据字典' : '新增数据字典';
    let values = { ...editData, status: editData.status == null ? true : editData.status };
    if (values.categoryId == null) {
      values.categoryId = store.categoryList.length > 0 ? store.categoryList[0].id : null;
    }
    return <Modal title={title} width={620}
                  visible={visible}
                  confirmLoading={loading}
                  onOk={this.okHandler}
                  onCancel={this.cancelHandler}
                  destroyOnClose={true}>
      <Form {...layout} ref={this.formRef} initialValues={values}>
        <Form.Item name='id' noStyle={true}>
          <Input type="hidden"/>
        </Form.Item>
        <Form.Item label="所属分类" name='categoryId' rules={[{ required: true, message: '请选择所属分类' }]}>
          <Select>
            {store.categoryList.map(item => {
              return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>;
            })}
          </Select>
        </Form.Item>
        <Form.Item label="字典名称" name='name' rules={[{ required: true, message: '请输入字典名称' }]}>
          <Input autoComplete="off"/>
        </Form.Item>
        <Form.Item label="字典标识" name='key' rules={[{ required: true, message: '请输入字典标识' }]}>
          <Input autoComplete="off"/>
        </Form.Item>
        <Form.Item label="字典描述" name='remark'>
          <Input.TextArea/>
        </Form.Item>
        <Form.Item label="当前状态" name='status' rules={[{ required: true, message: '请选择当前状态' }]}>
          <Select>
            <Select.Option value={true}>启用</Select.Option>
            <Select.Option value={false}>停用</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>;
  }
}

export default DictDialog;
